<template>
  <div class="index">
    <p class="title">
      <span>用户组织：{{this.$store.state.agent}}</span>
      <span>组织负责人：{{this.$store.state.agenter}}</span>
      <span>电话：{{this.$store.state.phone}}</span>
    </p>

    <div class="area comtab" v-show='hideflag'>
      <span class="gap">地区</span>
      <ul>
        <li @click="changearea(v,k)" :class="k == areakey ? 'picked' : '' " v-for="(v, k) in arealist" :key='k'>
          <button type="button">{{v.name}}
          </button>
        </li>
      </ul>
    </div>
    <div class="school comtab" v-show='hideflag'>
      <span>学校等级</span>
      <ul>
        <li @click="changeschool(v,k)" :class="k == schoolkey ? 'picked' : '' " v-for="(v, k) in schoolist" :key='k'>
          <button type="button">{{v.name}}
          </button>
        </li>
      </ul>
    </div>
    <div class="person comtab" v-show='hideflag'>
      <span class="gap">人员</span>
      <ul>
        <li @click="changeper(v,k)" :class="k == perkey ? 'picked' : '' " v-for="(v, k) in perlist" :key='k'>
          <button type="button">{{v.name}}
          </button>
        </li>
      </ul>
    </div>


    <div class="trend comtab">
      <span class="gap">统计项</span>
      <ul class="statistics">
        <li @click='changepro(v,i)' :class="i == prokey ? 'picks' : '' " v-for="(v,i) in prolist" :key='i'>
          <button type="button">{{v.name}}</button>
        </li>
      </ul>
    </div>


    <div class="citybox">
      <div class="menu">
        <span>姓名</span>
        <el-input class="inp" v-model="inpname" placeholder=""></el-input>
        <span>学校</span>
        <el-input class="inp" v-model="inpschool" placeholder=""></el-input>
        <span>健康码</span>
        <el-select class="healthyselect" v-model="healthycode" @change='changecode' placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" class="search" @click="searchdata"><i class="el-icon-search"></i> 搜索</el-button>
        <span class="exports">导出</span>
      </div>
      <div class="cabin">
        <table>
          <thead>
            <tr>
              <th v-for="(v,i) in headlist" :key='i'>{{v}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(v,i) in datalist" :key='i'>
              <!-- <td><i :class="v.sta == 0 ? 't1' : v.sta == 1 ? 't2' : v.sta == 2 ? 't3' : v.sta == 3 ? 't4' : ''"></i>{{ v.name }}</td> -->
              <td><i class="'t1"></i>{{ v.cityname }}</td>
              <td>{{ v.countyname }}</td>
              <td>{{ v.personId }}</td>
              <td>{{ v.name }}</td>
              <td>{{ v.classname }}</td>
              <td>{{ v.tp }}</td>
              <td>{{ v.healthstatus }}</td>
              <td>{{ v.healthcode }}</td>
              <td>{{ v.nucleic }}</td>
              <td class="detail" @click="todetails(v)">详情 ></td>
            </tr>
            <tr v-show='datalist.length == 0'>
              <td colspan="9" style="text-align: center;border-right: none;">无数据</td>
            </tr>
          </tbody>
        </table>
      </div>
      <el-pagination :current-page.sync="pagecurrent2" @current-change="handleSizeChange2" background layout="prev, pager, next"
        :total="pagetotal2"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      // map start
      inpname: '',
      inpschool: '',
      healthycode: '',
      showMapComponent: this.value,
      keyword: '',
      mapStyle: {
        width: '100%',
        height: this.mapHeight + 'px'
      },
      center: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 15,
      // map end
      hideflag: true,
      pagecurrent2: 1,
      pagetotal2: 10,
      pietitle: '2020-06-24',
      options: [{
        value: '1',
        label: '不涉及'
      }, {
        value: '0',
        label: '绿码'
      }, {
        value: '2',
        label: '黄码'
      }, {
        value: '3',
        label: '红码'
      }],
      trendlist: {
        n1: 12,
        n2: 4,
        n3: 3,
        n4: 4,
        n5: 5,
        n6: 6,
        n7: 7
      },
      nums: {
        n1: '68',
        n2: '29',
        n3: '30',
        n4: '39',
        n5: '95',
        n6: '58',
      },
      trendtime: '',
      agent: '广东教育局',
      statisticstype: '1',
      agenter: '张之洞',
      phone: '18182563865',
      curnum: '68',
      temperature: 86,
      confirmrisk: 13,
      testper: 400,
      temrate: '0.16%',
      riskrate: '-1.84%',
      testrate: '-7.49%',
      areakey: 0,
      timekey: 0,
      schoolkey: 0,
      prokey: 0,
      perkey: 0,
      headlist: ['城市', '区县', '学生ID', '名字', '学校', '最新温测', '当前状态', '健康码', '核酸检测', '详情'],
      datalist: [],
      arealist: ['全部', '广州', '深圳', '珠海市', '汕头', '佛山市', '韶关市', '湛江市', '肇庆市', '江门市', '茂名市', '惠州市', '梅州市', '汕尾市', '河源市',
        '阳江市', '清远市', '东莞市', '中山市', '潮州市', '揭阳市', '云浮市'
      ],
      schoolist: [{
        name: '全部',
        code: ''
      },
      {
        name: '幼儿园',
        code: '1'
      },
      {
        name: '小学',
        code: '2'
      },
      {
        name: '初中',
        code: '3'
      },
      {
        name: '高中',
        code: '4'
      },
      {
        name: '职高',
        code: '5'
      },
      {
        name: '中专',
        code: '6'
      },
      {
        name: '大学',
        code: '7'
      },
      ],
      perlist: [{
        name: '全部',
        code: ''
      },
      {
        name: '学生',
        code: '1'
      },
      {
        name: '职工学',
        code: '2'
      },
      {
        name: '访客',
        code: '3'
      },
      ],
      timelist: ['今天', '7天', '14天', '30天'],
      // prolist: [ '', '', '', '', '', '新增返校复课', '', '', '',
      //    '', '', ''
      // ],
      prolist: [{
        name: '测温',
        code: '1'
      },
      {
        name: '体温异常',
        code: '2'
      },
      {
        name: '返校复课',
        code: '11'
      },
      {
        name: '核酸检测',
        code: '12'
      },
      {
        name: '确诊人数',
        code: '13'
      },
      {
        name: '疑似人数',
        code: '14'
      },
      {
        name: '康复人数',
        code: '15'
      },
      {
        name: '停课班级',
        code: '8'
      },
      {
        name: '留校观察',
        code: '3'
      },
      {
        name: '居家隔离',
        code: '7'
      },
      {
        name: '医疗隔离',
        code: '5'
      },
      {
        name: '返校复课',
        code: '11'
      }
      ],
      temlist: [{
        name: '日测温人数',
        num: 200,
        sta: 0
      },
      {
        name: '日测温异常',
        num: 765,
        sta: 1
      },
      {
        name: '日疑似人数',
        num: 64,
        sta: 2
      },
      {
        name: '日康复人数',
        num: 521,
        sta: 3
      }
      ],
      gaplist: [{
        name: '日新增医疗隔离',
        num: 60,
        sta: 1
      },
      {
        name: '日新增居家隔离',
        num: 53,
        sta: 2
      },
      {
        name: '当前医学隔离',
        num: 27,
        sta: 3
      },
      {
        name: '当前居家隔离',
        num: 17,
        sta: 0
      }
      ],
      stoplist: [{
        name: '日停课班级',
        num: 28,
        sta: 2
      },
      {
        name: '日复课班级',
        num: 100,
        sta: 3
      },
      {
        name: '当前停课班级',
        num: 58,
        sta: 1
      },
      {
        name: '当日增返校复课人数',
        num: 33,
        sta: 0
      }
      ],
      confirmlist: [{
        name: '日确诊人数',
        num: 66,
        sta: 3
      },
      {
        name: '今日核酸检测人数',
        num: 190,
        sta: 0
      },
      {
        name: '累计确诊人数',
        num: 10,
        sta: 1
      },
      {
        name: '今日场所消杀次数',
        num: 100,
        sta: 2
      }
      ],
      pagecurrent: 1,
      pagesize: 10,
      ranklevel: '',
      provinceno: '',
      personType: '',
      schoolLevel: ''
    }
  },
  mounted() {
    this.getUserInfo();

  },
  methods: {
    changecode(v) {
      console.log(v);
      this.healthycode = v
    },
    handleSizeChange2(val) {
      console.log(val);
      this.pagecurrent2 = val;
      this.getlist()
    },
    getlist() {
      this.datalist = [];
      this.$http('/health/healthInfoStatistics/getPersonHealths', {
        "ranklevel": this.ranklevel,
        "provinceno": this.provinceno,
        "schoolno": this.schoolno,
        "cityno": this.cityno,
        "istoday": "",
        "statisticstype": this.statisticstype,
        "personType": this.personType,
        "studentname": this.inpname,
        "schoolname": this.inpschool,
        "schoolLevel": this.schoolLevel,
        "healthCode": this.healthycode,
        "pagecurrent": this.pagecurrent,
        "pagesize": this.pagesize
      }).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.datalist = res.data;
          this.datalist.forEach(item => {
            item.typeCode = item.type == '学生' ? 1 : item.type == '职工' ? 2 : 3
          })
          this.pagetotal2 = Math.ceil(this.datalist.length / this.pagesize) * 10
        }
      })
    },
    // 用户信息
    getUserInfo() {
      this.$http('/user/loginindex', {}).then(
        res => {
          console.log(res)
          if (res.code == 200) {
            var obj = {
              code: '',
              name: '全部'
            }
            this.$store.commit('changeagent', res.data.user.organizationname);
            this.$store.commit('changeagenter', res.data.user.collegename);
            this.$store.commit('changeuser', res.data.user.username);
            this.$store.commit('changephone', res.data.user.phone);
            this.$store.commit('changerole', res.data.roleid);
            this.$store.commit('changeposition', res.data.user.position);
            if (res.data.adress != '') {
              this.arealist = res.data.adress;
              this.arealist.splice(0, 0, obj);
            }

            this.provinceno = res.data.user.provinceid;
            this.cityno = res.data.user.cityid;
            switch (res.data.roleid) {
              case 1002:
                this.provinceFlag = true;
                break;
              case 1003:
                this.cityFlag = true;
                break;
              case 1005:
                this.schoolFlag = true;
                break;
              case 1006:
                this.gradeFlag = true;
                break;
            }
            if (res.data.user.schoolid) {
              this.schoolno = res.data.user.schoolid
            }
            if (res.data.user.classno) {
              this.classno = res.data.user.classno
            }
            switch (this.$store.state.role) {
              case 1001:
                this.ranklevel = '1';
                this.hideflag = true;
                break;
              case 1002:
                this.ranklevel = '2';
                this.hideflag = true;
                break;
              case 1003:
                this.ranklevel = '3';
                this.hideflag = true;
                break;
              case 1004:
                this.ranklevel = '';
                break;
              case 1005:
                this.ranklevel = '4';
                this.hideflag = false;
                break;
              case 1006:
                this.ranklevel = '5';
                this.hideflag = false;
                break;
            };
          }
          this.getlist()
        }
      )
    },
    searchdata() {
      this.getlist()
    },
    changearea(v, k) {
      this.areakey = k;
      console.log(v)
    },
    changeschool(v, k) {
      this.schoolkey = k;
      this.schoolLevel = v.code;
      this.getlist();
      console.log(v)
    },
    changeper(v, k) {
      this.perkey = k;
      console.log(v);
      this.personType = v.code;
      this.getlist()
    },
    changeday(v, i) {
      this.timekey = i;
      console.log(v)
    },
    changepro(v, i) {
      this.prokey = i;
      this.statisticstype = v.code;
      this.getlist()
    },
    detilsen() {
      console.log(3)
    },
    todetails(v) {
      this.$router.push({
        path: '/monitorDetails',
        query: {
          personId: v.personId,
          type: v.typeCode
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-pagination {
	margin: 30px 0;
}
/deep/ .el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
	background-color: #090f42;
	color: #fff;
	border: 1px solid #1a2497;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
	background-color: #1520be;
	border-color: #1520be;
}
.index {
	.title {
		font-size: 14px;
		color: white;
		margin-bottom: 25px;
		span {
			margin-right: 30px;
		}
	}

	.menu {
		display: flex;
		justify-content: space-between;
		margin: 10px 0 40px 0;

		.healthyselect {
			/deep/ .el-input__inner {
				background-color: transparent;
				color: #fff;
			}
		}

		span {
			line-height: 40px;
			font-size: 14px;
			color: #fff;
		}

		.exports {
			font-size: 14px;
			color: #1e29ad;
			cursor: pointer;

			&:hover {
				color: #fff;
			}
		}

		.inp {
			width: 200px;

			/deep/ .el-input__inner {
				color: #fff;
				background-color: transparent;
			}
		}

		.search {
			background-color: #1e29ad;
			border-color: #1e29ad;

			&:hover {
				background-color: #409eff;
				border-color: #409eff;
			}
		}

		.el-date-editor {
			/deep/ .el-input__prefix {
				display: none;
			}

			/deep/ .el-input__inner {
				background-color: transparent;
				color: #fff;
			}
		}
	}

	// 地区 tab
	.comtab {
		overflow: hidden;
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 12px;

		span {
			width: 110px;
			font-size: 14px;
			color: white;
			line-height: 36px;

			&.gap {
				letter-spacing: 1em;
			}
		}

		ul {
			width: 100%;

			li {
				display: inline-block;
				margin-right: 25px;

				&.picked {
					button {
						color: #00c8f1;
					}
				}

				button {
					cursor: pointer;
					border: none;
					background: transparent;
					font-size: 14px;
					color: white;
					line-height: 36px;

					&:focus {
						outline: none;
					}

					&:hover {
						color: #00c8f1;
					}
				}
			}
		}
	}

	// 地区 tab 对应的数据
	.situation {
		display: flex;
		justify-content: space-between;
		background-color: #000418;
		padding: 20px;
		box-sizing: border-box;
		margin-bottom: 15px;

		span {
			width: 16px;
			font-size: 14px;
			color: white;
			-webkit-writing-mode: vertical-rl;
			writing-mode: vertical-rl;
			border: 1px solid #192b7c;
			background-color: #0b1233;
			border-radius: 4px;
			padding: 16px 8px;
			text-align: center;
			letter-spacing: 4px;

			&.spespan {
				font-size: 12px;
				padding: 6px 8px;
			}
		}

		ul {
			justify-content: space-between;
			width: 94%;
			display: flex;

			li {
				width: 226px;
				height: 128px;
				border-left: 1px solid #454b66;
				border-right: 1px solid #454b66;
				border-top: 1px solid #101944;
				border-bottom: 1px solid #101944;
				border-radius: 6px;

				&:hover {
					border: 1px solid white;
					cursor: pointer;

					b {
						color: #3440de;
					}

					p {
						color: #5862e4;

						i {
							background-color: #444ecf !important;
						}
					}
				}

				b {
					display: block;
					font-size: 30px;
					color: white;
					text-align: center;
					line-height: 80px;
					background-color: #000418;
					border-radius: 6px;
				}

				p {
					background-color: #0b1026;
					font-size: 14px;
					color: white;
					text-align: center;
					line-height: 46px;
					border-top: 1px solid #101944;
					border-radius: 6px;

					i {
						display: inline-block;
						width: 8px;
						height: 8px;
						border-radius: 50%;
						margin-right: 8px;
					}

					.col1 {
						background-color: #d25d57;
					}

					.col2 {
						background-color: #932f9e;
					}

					.col3 {
						background-color: #25c9ff;
					}

					.col4 {
						background-color: #92d80b;
					}
				}
			}
		}
	}

	//趋势分析
	.trend {
		.gap {
			letter-spacing: 0 !important;
		}

		h2 {
			font-size: 18px;
			color: white;
			margin: 40px 0 30px 0;
		}

		.timebox {
			overflow: hidden;
			width: 100%;
			margin: 12px 0;

			ul {
				display: inline-block;
				float: left;

				li {
					display: inline-block;
					float: left;
					font-size: 14px;
					color: white;
					margin-right: 32px;
					line-height: 24px;

					&:first-child {
						width: 60px;
					}

					&.actived {
						button {
							color: #00c8f1;
						}
					}

					button {
						font-size: 14px;
						color: white;
						border: none;
						background-color: transparent;
						cursor: pointer;

						&:focus {
							outline: none;
						}

						&:hover {
							color: #00c8f1;
						}
					}
				}
			}

			.timeicon {
				float: right;
				font-size: 18px;
				width: 32px;
				height: 28px;
				line-height: 30px;
				border: 1px solid white;
				border-radius: 0 4px 4px 0;
				color: white;
			}

			.picktime {
				float: right;

				/deep/ .el-input__inner {
					height: 30px !important;
					line-height: 30px !important;
					padding-left: 10px;
					background: transparent;
					color: white;
					font-size: 12px;
					border-radius: 4px 0 0 4px;
				}

				/deep/ .el-input__prefix {
					display: none;
				}

				/deep/ .el-input__icon {
					line-height: 30px;
				}
			}
		}

		.statistics {
			overflow: hidden;
			width: 100%;
			margin-bottom: 30px;

			li {
				display: inline-block;
				float: left;
				font-size: 14px;
				color: white;
				margin-right: 32px;
				line-height: 24px;

				// &:first-child {
				//   width: 60px;
				// }

				&.picks {
					button {
						color: #00c8f1;
					}
				}

				button {
					font-size: 14px;
					color: white;
					border: none;
					background-color: transparent;
					cursor: pointer;

					&:focus {
						outline: none;
					}

					&:hover {
						color: #00c8f1;
					}
				}
			}
		}
	}

	// 趋势图
	.region {
		overflow: hidden;
		position: relative;
		width: 100%;

		.detail {
			cursor: pointer;
			position: absolute;
			right: 20px;
			bottom: 30px;
			color: #4353da;
			font-size: 14px;

			&:hover {
				color: white;
			}
		}
	}

	// 当前省份
	.curentcity {
		margin-top: 20px;

		h2 {
			font-size: 18px;
			color: white;
			margin: 40px 0 30px 0;
		}
	}

	// 城市概况
	.citybox {
		h2 {
			font-size: 18px;
			color: white;
			margin: 40px 0 30px 0;
		}

		.cabin {
			padding: 10px 20px;
			background: #000;

			table {
				width: 100%;
				display: table;
				border-collapse: collapse;

				thead {
					border-bottom: 1px solid #313445;

					th {
						color: #fff;
						font-size: 14px;
						font-weight: 500;
						line-height: 60px;

						&:first-child {
							border-right: 1px solid #313445;
						}
					}
				}

				tbody {
					tr {
						td {
							&:first-child {
								border-right: 1px solid #313445;
							}
						}
					}

					td {
						font-size: 13px;
						color: #fff;
						text-align: center;
						line-height: 60px;

						&.detail {
							color: #2a36e0;
							cursor: pointer;

							&:hover {
								color: orangered;
							}
						}

						i {
							display: inline-block;
							width: 8px;
							height: 8px;
							border-radius: 50%;
							margin-right: 6px;
						}

						.t1 {
							background-color: #3c3694;
						}

						.t2 {
							background-color: #ca8c38;
						}

						.t3 {
							background-color: #8a58d1;
						}

						.t4 {
							background-color: #c5506f;
						}
					}
				}
			}
		}
	}
}
</style>
